<template>
  <div class="activity-editor">
    <el-tabs>
      <el-tab-pane label="基本信息">
        <div class="form-section">
          <h3>活动海报</h3>
          <el-upload
            class="cover-uploader"
            action="#"
            :http-request="uploadImage"
            :show-file-list="false"
            :before-upload="beforeUpload"
          >
            <img v-if="modelValue.banner" :src="modelValue.banner" class="cover-image">
            <div v-else class="cover-placeholder">
              <el-icon><Plus /></el-icon>
            </div>
          </el-upload>
        </div>
        
        <div class="form-section">
          <h3>活动时间</h3>
          <el-date-picker
            v-model="activityTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          />
        </div>
        
        <div class="form-section">
          <h3>活动地点</h3>
          <el-input v-model="modelValue.location" placeholder="输入活动地点" />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="活动详情">
        <div class="form-section">
          <h3>活动详情</h3>
          <el-input
            v-model="modelValue.description"
            type="textarea"
            :rows="15"
            placeholder="输入活动详情"
          />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="SEO设置">
        <div class="form-group">
          <label>SEO标题</label>
          <el-input v-model="modelValue.meta_title" placeholder="SEO标题" />
        </div>
        
        <div class="form-group">
          <label>SEO描述</label>
          <el-input
            v-model="modelValue.meta_description"
            type="textarea"
            :rows="3"
            placeholder="SEO描述"
          />
        </div>
        
        <div class="form-group">
          <label>SEO关键词</label>
          <el-input v-model="modelValue.meta_keywords" placeholder="关键词，用逗号分隔" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

// 处理活动时间
const activityTime = computed({
  get: () => {
    return props.modelValue.activity_time || [new Date(), new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)]
  },
  set: (value) => {
    const newValue = { ...props.modelValue, activity_time: value }
    emit('update:modelValue', newValue)
  }
})

// 上传图片前的验证
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  
  return true
}

// 上传活动海报
const uploadImage = (options: any) => {
  const file = options.file
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    const newValue = { ...props.modelValue, banner: reader.result }
    emit('update:modelValue', newValue)
  }
}
</script>

<style scoped>
.form-section {
  margin-bottom: 20px;
}

.form-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.cover-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

.cover-placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

.cover-placeholder:hover {
  border-color: #409eff;
}
</style> 